<template>
  <!-- 新增费用主体 -->
  <view>
    <u-form class="form" :model="{}" :label-width="150">
      <u-form-item label="年份"><u-input disabled :value="year" placeholder="年份"></u-input></u-form-item>
      <u-form-item label="季度">
        <u-radio-group v-model="form.QuarterId" disabled>
          <view class="grid-2 u-row-right">
            <u-radio v-model="item.checked" v-for="(item, index) in QuarterList" :key="index" :name="item.value">
              {{ item.label }}
            </u-radio>
          </view>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="费用主体" required>
        <u-input
          :value="companyName"
          placeholder="请选择费用主体"
          inputAlign="right"
          type="select"
          :selectOpen="showCompanyPicker"
          @tap="showCompanyPicker = true"
        ></u-input>
      </u-form-item>

      <u-form-item label="分配方式" required>
        <u-radio-group v-model="form.IsPercentage">
          <view class="grid-2">
            <u-radio v-model="item.checked" v-for="(item, index) in AssignTypeList" :key="index" :name="item.value">
              {{ item.label }}
            </u-radio>
          </view>
        </u-radio-group>
      </u-form-item>

      <u-form-item label="分配金额" required>
        <u-input type="number" v-model="form.TotalCost" placeholder="分配金额"></u-input>
      </u-form-item>

      <u-form-item label="描述"><u-input v-model="form.Remark" type="textarea"></u-input></u-form-item>
    </u-form>

    <u-select
      @confirm="onCompanyChange"
      v-model="showCompanyPicker"
      :list="CompanyList"
      label-name="Name"
      value-name="Id"
      safe-area-inset-bottom
    ></u-select>

    <u-toast ref="uToast" />

    <view class="btn-group-fixed u-p-20"><u-button type="warning" @tap="handleSubmit">提交</u-button></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        QuarterId: '',
        CompanyId: '',
        TotalCost: '',
        Remark: '',
        IsPercentage: ''
      },

      showCompanyPicker: false,

      CompanyList: [],
      QuarterList: [
        { label: '第一季度', value: 1, checked: false },
        { label: '第二季度', value: 2, checked: false },
        { label: '第三季度', value: 3, checked: false },
        { label: '第四季度', value: 4, checked: false }
      ],
      AssignTypeList: [{ label: '按比例', value: 1, checked: false }, { label: '按金额', value: 2, checked: false }]
    };
  },

  onLoad() {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;

    this.year = year;

    this.form.QuarterId = parseInt((month + 2) / 3);

    this.getCompanyList();
  },

  methods: {
    getCompanyList() {
      this.$u.api.getCompanyList({ Level: 1 }).then(res => {
        if (res) {
          this.CompanyList = res;
        }
      });
    },

    onCompanyChange(e) {
      if (e && e.length > 0) {
        this.form.CompanyId = e[0].value;
      }
    },

    handleSubmit() {
      this.$u.api.addMarketCosts(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;

        if (ResultCode == 1) {
          this.$refs.uToast.show({
            title: ResultMessage,
            back: true
          });
        } else {
          this.$u.toast(ResultMessage);
        }
      });
    }
  },

  computed: {
    companyName() {
      return this.CompanyList.find(item => item.Id == this.form.CompanyId)?.Name;
    }
  }
};
</script>

<style>
page {
  background-color: #eae8ed;
}
</style>

<style lang="scss">
.form {
  padding: 30rpx;
  background-color: #fff;
  margin: 30rpx;
  border-radius: 24rpx;
}
/deep/.u-form-item__body {
  align-items: flex-start !important;
}
.u-input {
  text-align: left !important;
}
</style>
